<!-- container box 嵌套 box -->
<template>
  <div class="nesting-box">
    <div class="nesting-main">
      <div class="form-list">
        <el-scrollbar style="height:100%;">
          <el-table :data="commonComponentList" style="width: 100%" v-loading="loading">
            <el-table-column prop="name" label="公共组件名称">
            </el-table-column>
            <el-table-column label="操作" width="150" align="center">
              <template slot-scope="scope">
                <el-button @click="editorForm(scope.row)" type="text" size="small">编辑</el-button>
                <el-button @click="chooseForm(scope.row)" type="text" size="small">选择</el-button>
                <el-button @click="deleteForm(scope.row)" type="text" size="small">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-scrollbar>
      </div>
    </div>
  </div>
</template>

<script>
import BackendjsFunctions from '@/core/BackendjsFunctions.js'
import { mapState } from 'vuex'
export default {
  props: {
    // 调用方法所需参数
    tmpContainerId: {
      type: String
    },
    close: {
      type: Function
    }
  },
  computed: {
    ...mapState([
      'design'
    ])
  },
  created () {
    this.commonComponentList = BackendjsFunctions.getCommonComponentList()
  },
  data () {
    return {
      formLabelWidth: '100px',
      // 公共组件列表数据
      commonComponentList: null,
      loading: false
    }
  },
  methods: {
    // 编辑
    editorForm (item) {
      this.$prompt('修改公共组件名称！', '修改', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputValue: item.name,
        closeOnClickModal: false,
        inputValidator: (str) => {
          if (str && str.trim().length > 100) {
            return '公共组件名称长度不能超过100个字！'
          }
          if (!str || str.trim().length === 0) {
            return '公共组件名称不能为空！'
          }
          return true
        },
        inputErrorMessage: '公共组件名称不真确'
      }).then(({ value }) => {
        this.loading = true
        BackendjsFunctions.updateCommonComponentNameByTmpId(item.tmpId, value)
        this.commonComponentList = BackendjsFunctions.getCommonComponentList()
        this.loading = false
      }).catch(() => { })
    },
    // 选择了该组件
    chooseForm (item) {
      BackendjsFunctions.addCommonComponentParams(this.tmpContainerId, item.tmpId, item.componentTypeName)
      this.close()
    },
    deleteForm (item) {
      this.$confirm('确认删除此公共组件么?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.loading = true
        BackendjsFunctions.delCommonComponentByTmpId(item.tmpId)
        this.commonComponentList = BackendjsFunctions.getCommonComponentList()
        this.loading = false
      }).catch(() => {})
    }
  }
}
</script>

<style scoped lang="scss">
.nesting-main {
  min-height: 356px;
  .form-list {
    height: 410px;
    /deep/ .el-scrollbar__wrap{
      overflow-x: hidden;
    }
  }

  /deep/ .el-table th {
    color: #555;
  }
}
.btn-add {
  text-align: right;
  margin-top: 20px;
}
</style>
